<template>
  <div>
    <template v-if="isHeart">
      <zm-form>
        <zm-form-item label="规则时间：">
          {{ infoData.ruleStartTime }} 至 {{ infoData.ruleEndTime }}
        </zm-form-item>
        <zm-form-item label="可用渠道：">
          {{ infoData.xxChannelName }}
        </zm-form-item>
        <zm-form-item label="是否所有公司可用：">
          {{ getIsLimitCompany(infoData.isLimitCompany) }}
        </zm-form-item>
        <zm-form-item label="指定公司分组：" v-if="infoData.isLimitCompany !== '0'">
            {{ infoData.companyGroupName }}
        </zm-form-item>
        <zm-form-item label="折扣方案："> </zm-form-item>
        <el-card
          class="box-card rulesBox"
          v-for="(item, index) in infoData.xxRule"
          :key="index"
        >
          <div slot="header">{{ item.name }}</div>
          <div class="ml20">
            <zm-form-item label="选择公司：">
              {{ item.companyType === '1'?'指定公司':'公司分组' }}
            </zm-form-item>
            <zm-form-item label="公司名称：">
              {{ item.companyName }}
               <zm-button type="text" v-if="item.companyType==='2'" @click="openDialog(item.companyId)">查看组内公司</zm-button>
            </zm-form-item>
            <zm-form-item label="签约折扣：">
              {{ item.advancePrice }} 元抵 {{ item.discountPrice }} 元
            </zm-form-item>
          </div>
        </el-card>
        <!-- <zm-form-item label="兑换范围：">
          <zm-table-data
            :data="infoData.xxExchange"
            :columns="exchangeColumns"
            :table-params="tableParams"
            class="mb"
          />
        </zm-form-item> -->
        <zm-form-item class="mt20" label="兑换规则："></zm-form-item>
        <div v-html="infoData.exchangeRules"></div>
      </zm-form>
    </template>
    <h3 class="fc9" v-else>暂无数据</h3>
    <check-ground-dialog v-if="dialogParams.visible" v-model="dialogParams.visible" :id="dialogParams.ids"></check-ground-dialog>
  </div>
</template>

<script>
import { exchangeColumns } from './const'
import tableMixin from '@/mixins/zmTableMixin'
import CheckGroundDialog from './CheckGroundDialog.vue'
export default {
  name: 'ExpandXinxuan',
  components: { CheckGroundDialog },
  inject: ['$detail'],
  mixins: [tableMixin],
  data () {
    return {
      dialogParams: {
        visible: false,
        ids: ''
      }
    }
  },
  computed: {
    infoData () {
      return this.$detail.infoData
    },
    xxRule () {
      return this.$detail.infoData.xxRule
    },
    isHeart () {
      return this.infoData.businessType.includes('3') || this.infoData.useScope.includes('2')
    },
    exchangeColumns () {
      return exchangeColumns(this)
    }
  },
  watch: {},
  created () {},
  methods: {
    getIsLimitCompany (val) {
      const _obj = {
        0: '所有公司可用',
        1: '指定公司不可用',
        2: '指定公司可用'
      }
      return _obj[+val]
    },
    openDialog (ids) {
      this.dialogParams = {
        visible: true,
        ids: ids
      }
    }
  }
}
</script>

<style scoped lang='scss'>
</style>
